<template>
    <div class="selfFilter">
        <div class="filterItems">
            <van-dropdown-menu>
                <van-dropdown-item @change="flashOrder" class="van-drop" v-model="order" :options="option1" title="排序"/>
                <van-dropdown-item @change="flashKind" class="van-drop" v-model="food.food_kind_id" :options="option2" title="种类"/>
            </van-dropdown-menu>
            <div class="sort-filter" role="button" @click="showPopup=true">
                筛选<van-icon name="filter-o" style="vertical-align: middle"/>
            </div>
        </div>
        <van-popup
                v-model="showPopup"
                position="right"
                :style="{ width: '70%' }"
        >
            <div class="tag-selection">
                <ul class="quality">
                    <li>评价</li>
                    <van-divider :style="{borderColor: 'rgba(123,122,122,0.3)', padding: '0 16px' }"/>
                    <li :class="{checked:choosenOne==index}" v-for="(cur,index) in opinion" :key="index"
                        @click="choosenOne=choosenOne==index?-1:index">{{cur.text}}</li>
                </ul>
<!--                <ul class="quality">-->
<!--                    <li>评价</li>-->
<!--                    <van-divider :style="{borderColor: 'rgba(123,122,122,0.3)', padding: '0 16px' }"/>-->
<!--                    <li :class="{checked:choosenOne==index}" v-for="(cur,index) in quality" :key="index"-->
<!--                        @click="selectOneTag(1,index)">{{cur}}</li>-->
<!--                </ul>-->
                <ul class="discount">
                    <li>折扣</li>
                    <van-divider :style="{borderColor: 'rgba(123,122,122,0.3)', padding: '0 16px' }"/>
                    <li :class="{checked:choosenTwo==index}" v-for="(cur,index) in discount " :key="index"
                        @click="choosenTwo=choosenTwo==index?-1:index">{{cur.text}}</li>
                </ul>
                <div class="priceRange">
                    <div>价格</div>
                    <van-divider :style="{borderColor: 'rgba(123,122,122,0.3)', padding: '0 16px' }"/>
                    <div class="input">
                        <van-field v-model="floor" input-align="center" type="digit" placeholder="底价" />
                        <van-field v-model="top" input-align="center" type="digit" placeholder="顶价" />
                    </div>
                </div>
                <van-button block style="margin-bottom: 10px" @click="clearChoose">清空选项</van-button>
            </div>
            <div class="buttonGroup">
                <van-button type="warning" @click="confirm">确定</van-button>
                <van-button @click="showPopup=false" >取消</van-button>
            </div>
        </van-popup>
        <div class="food-list">
            <van-list
                    v-model="loading"
                    :finished="finished"
                    :error.sync="error"
                    finished-text="没有更多了"
                    error-text="请求出错，点击此处刷新"
                    @load="onload"
            >
                <template #default>
<!--                    :origin-price="food.food_price"-->
                    <van-card
                            v-for="food in foods"
                            :key="food.food_id"
                            :num="food.food_remain_number"
                            :price="food.food_price"
                            :desc="food.food_depiction"
                            :title="food.food_name"
                            @click="()=>{clickCard(food.food_id)}"
                            :thumb="`http://localhost:8080/res/${food.food_img}`"
                    >
                    </van-card>
                </template>
            </van-list>

        </div>
    </div>
</template>

<script>
    export default {
        name: "SelfFilter",
        data(){
            return {
                total:1000,
                food: {
                    food_kind_id:'',
                },
                pageNum:1,
                pageSize:7,
                error:false,
                show:false,//弹出动作面板
                loading:false,
                finished:false,
                searchValue:'',
                foods:[],
                choosenTwo:-1,
                choosenOne:-1,
                floor:0,//最低价
                top:100,//最高价
                showPopup:false,//弹出筛选框
                order:'food_price',
                opinion:[{text:'满分好评',value:1},
                    {text:'好评较多',value:0.5},],
                //quality:['五星好评','三星以上','已评价',],
                discount:[{text:'折扣商品',value:0.9},
                    {text:'特价商品',value: 0.5},],
                option1: [
                    { text: '价格排序', value: 'food_price' },
                    { text: '好评排序', value: 'good_frequency' },
                    // { text: '销量排序', value: 2 },
                ],
                option2: [
                    { text: '全部', value: '' },
                    { text: '炒菜', value: 8 },
                    { text: '甜点', value: 1 },
                    { text: '汤菜', value: 9 },
                ],
            };
        },
        created(){
          this.loading=true;
          this.onload();
        },
        methods:{
            clickCard(foodID){
                this.$router.push({
                    name:'FoodDetail',
                    params:{
                        food_id:foodID,
                    }
                });
            },
            onload(){
                this.axios.post(this.GLOBAL.complexQuery,this.food,{
                    params:{
                        pageNum:this.pageNum,
                        pageSize:this.pageSize,
                        lowestPrice:this.floor,
                        highestPrice:this.top,
                        orderBy:this.order,
                    }
                }).then(res=>{
                    this.pageNum++;
                    let searchList=res.data.searchList;
                    this.foods.push(...searchList.list);
                    this.total=searchList.total;
                }).catch(()=>{this.error=true;});
                this.loading=false;
                if(this.foods.length>=this.total){
                    this.finished=true;
                }
            },
            confirm(){
                if(this.choosenOne>-1){
                    this.food.good_frequency=this.opinion[this.choosenOne].value;
                }else{
                    this.food.good_frequency='';
                }
                if(this.choosenTwo>-1){
                    this.food.food_discount=this.discount[this.choosenTwo].value;
                }else{
                    this.food.food_discount='';
                }
                this.showPopup=false;
                this.pageNum=1;
                this.foods=[];
                this.loading=true;
                this.onload();
            },
            clearChoose(){
              this.choosenOne=-1;
              this.choosenTwo=-1;
              this.floor=0;
              this.top=100;
              this.food.food_discount='';
              this.food.good_frequency='';
            },
            flashOrder(value){
                this.order=value;
                this.pageNum=1;
                this.foods=[];
                this.loading=true;
                this.onload();
            },
            flashKind(){
                this.pageNum=1;
                this.foods=[];
                this.loading=true;
                this.onload();
            }
        },
    }
</script>

<style lang="less">
    @import "../main.less";
    .checked{
        background-color: #f15e67 !important;
    }
    .selfFilter{
        .filterItems{
            position: sticky;
            top: 10px;
			//top: 0px;
            z-index: 1;
            .van-dropdown-menu{
                display: inline-block;
                width: 75%;
                height: 30px;
                .van-dropdown-menu__bar{
                    height: 100%;
                    box-shadow: none;
                    .van-dropdown-menu__item{
                        border-right: rgba(121, 122, 125, 0.3) 1px solid;
                    }

                }
                .van-popup--top{
                    left: 5%;
                    width: 90%;
                }
            }
            .sort-filter{
                width: 25%;
                height: 30px;
                display: inline-block;
                text-align: center;
                vertical-align: top;
                font:15px/30px Avenir;
                color: #332233;
                background-color: #fff;
            }
        }
        .food-list{
            margin-top: 10px;
            .van-card{
                border-radius: 12px;
                padding: 6px;
                background-color: white;
                .van-card__title{
                    transform: translateY(5px);
                    font-size: 20px;
                    line-height: 25px;
                }
                .van-card__desc{
                    transform: translateY(15px);
					
                    .tips;
                }
                .van-card__price{
                    color: #EB6649;
                }
            }

        }
        .van-popup{
            background-color: #F7F7F7;
        }
        .tag-selection{
            ul{
                li{
                    float: left;
                    width: 30%;
                    height: 30px;
                    box-sizing: border-box;
                    margin: 2px 1% 10px 0;
                    text-align: center;
                    line-height: 30px;
                    border-radius: 8px;
                    background-color: #f7f7f7;
                    &:first-child{
                        text-align: left;
                        width: 100%;
                        background-color: #fff;
                    }
                }
                &:after{
                    content:"";
                    display:block;
                    clear:both;
                }
            }
            .quality,.discount,.priceRange{
                margin-bottom: 10px;
                background-color: white;
                padding: 5px;
            }
            .priceRange{
                margin-bottom: 10px;
                .input{
                    padding: 0 5%;
                    display: flex;
                    .van-field{
                        flex: 1;
                        margin-right: 3px;
                        border: 1px dashed rgba(128, 128, 128, 0.3);
                    }
                }

            }
        }
        .buttonGroup{
            display: flex;
            .van-button{
                flex: 1;
            }
        }
    }
</style>